<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			.mui-table-view-cell.mui-active{
				background-color: #0062CC;
			}

		</style>
	</head>
	<body>
		
		<!-- 顶部标题 -->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">首页</h1>
		</header>
		
		
		
		<!-- 内容 -->
		<div class="mui-content">
			
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="img/yuantiao.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/shuijiao.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/muwu.jpg">
							<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/cbd.jpg">
							<p class="mui-slider-title">Color of SIP CBD</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="img/yuantiao.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="img/shuijiao.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell">Item 1</li>
			</ul>
			
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right">Item 1</a>
			    </li>
				
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">消息
				        <span class="mui-badge mui-badge-primary">11</span>
				    </li>
					
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell mui-media">
					        <a href="javascript:;">
					            <img class="mui-media-object mui-pull-left" src="img/shuijiao.jpg">
					            <div class="mui-media-body">
					                幸福
					                <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
					            </div>
			

			
			
		<!-- </div> -->
		
		
		
		
		
		<!-- 底部选项卡 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item xx" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item txl" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item sz" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		
		
		
		
		
		
		
		
		
		
		
		
	
		<script>
			
			mui(document.body).on('tap','.xx',function(){
			  //打开新闻详情
			  mui.openWindow({
			    url:'消息.html'
			  });
			}) 
			
			mui(document.body).on('tap','.txl',function(){
			  //打开新闻详情
			  mui.openWindow({
			    url:'通讯录.html'
			  });
			}) 
			
			mui(document.body).on('tap','.sz',function(){
			  //打开新闻详情
			  mui.openWindow({
			    url:'设置.html'
			  });
			}) 
			
		</script>
		
		
	</body>
</html>